<template>
	<view class="container">
		

		<!-- 选项框 -->
		
		<uni-row class='Option' style="margin-top: 30px;">
			<uni-col :span="18" style="margin-left: 30px">
				<uni-search-bar radius="5" v-model="searchValue" placeholder="搜你想搜..." bgColor="#fff" clearButton="auto" cancelButton="none"
					@confirm="search"  />

			</uni-col>
			<uni-col :span="2" style="margin-top: 13px;">
				<uni-icons type="closeempty" color="#212529" size="25" @click="searchTypeLock"></uni-icons>
			</uni-col>
		</uni-row>
		

		<!-- 列表内容 -->
		<uni-row id='content'>
			<view v-for="(item, index) in items">
				<!-- <uni-list-chat style="background-color: #f5f5f5;" :avatar-circle="true" :title="item.title"
					:avatar="item.img" :note="item.message" :time="item.date"></uni-list-chat> -->
				<uni-row style="margin-top: 10px;">
					<text class="data_title" v-html="item.title"></text>
				</uni-row>
				<uni-row>
					<text class="data_message" v-html="item.content"></text>
				</uni-row>
				<uni-row>
					<uni-col :span="2">
						<!-- <image id='img' :mode="model"
							 :v-lazy="item.src">
						</image> -->
						<img v-lazy="item.userPhoto" style="width: 32px;height: 32px;">
						<!-- <image style="width: 32px;height: 32px;"  lazy-load="true" :src="item.src" /> -->
					</uni-col>
					<uni-col :span="2" class="col2" style="margin-left: 10px;">
						<uni-icons type="eye" size="20"></uni-icons>
					</uni-col>
					<uni-col :span="2" class="col2">
						{{item.count}}
					</uni-col>
					<uni-col :span="2" class="col2">
						<uni-icons type="chatbubble" size="20"></uni-icons>
					</uni-col>
					<uni-col :span="2" class="col2">
						0
					</uni-col>
					<uni-col :span="2" class="col2">
						<uni-icons type="hand-up" size="20"></uni-icons>
					</uni-col>
					<uni-col :span="2" class="col2">
						{{item.likesNum}}
					</uni-col>
					<uni-col :span="2" class="col2" style="margin-left: 20px;">
						<uni-icons type="map" size="20"></uni-icons>
					</uni-col>
					<uni-col :span="5" class="col2">
						{{item.tagName}}
					</uni-col>
				</uni-row>
				<view style="width: 100%;height: 1px;background-color: #d6dbe3;"></view>
		
		
			</view>
		
			<uni-load-more :status="loadingStatus" :content-text="contentText"  @clickLoadMore="loadMore"></uni-load-more>
		
		
		</uni-row>
		
		
	</view>
</template>

<script>
	// 引入 request 文件
	import request from '@/util/request';
	
	export default {
		data() {
			return {
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				page:1,
			    pageSize:1,
				searchType: true,
				searchValue:"",
				model: 'scaleToFill',
				current: 0,
				mode: 'round',
				loadingStatus: 'more', // 加载更多的状态
				items: [{
						message: '内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容',
						img: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png",
						title: "章章",
						date: "2022-08-07 22:11",
						src:"http://localhost:5173/static/c1.png"
					},
					{
						message: '内容',
						img: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png",
						title: "小沂",
						date: "2023-08-07 22:11",
						src:"http://localhost:5173/static/c2.png"
					},
					{
						message: '内容',
						img: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png",
						title: "霞儿",
						date: "2024-08-07 22:11",
						src:"http://localhost:5173/static/c3.png"
					},
					{
						message: '内容',
						img: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png",
						title: "标题4",
						date: "2025-08-07 22:11",
						src:"http://localhost:5173/static/c4.png"
					},
					{
						message: '内容',
						img: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png",
						title: "标题4",
						date: "2025-08-07 22:11",
						src:"http://localhost:5173/static/c5.png"
					},
					{
						message: '内容',
						img: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png",
						title: "标题4",
						date: "2025-08-07 22:11",
						src:"http://localhost:5173/static/c6.png"
					},
					{
						message: '内容',
						img: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png",
						title: "标题4",
						date: "2025-08-07 22:11",
						src:"http://localhost:5173/static/c7.png"
					},
					{
						message: '内容',
						img: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png",
						title: "标题4",
						date: "2025-08-07 22:11",
						src:"http://localhost:5173/static/c8.png"
					},
					{
						message: '内容',
						img: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png",
						title: "标题4",
						date: "2025-08-07 22:11",
						src:"http://localhost:5173/static/c9.png"
					},

				]

			}
		},
		 mounted() {
			 
		   
		  },
		  onShow() {
		  	// 进入页面时执行的方法
		  	this.page = 1;
		  	this.doSomethingWhenPageEnters();
		  	this.article();
		  },
		methods: {
			doSomethingWhenPageEnters(){
				this.searchValue =	this.$route.query.search;
			},
			searchTypeLock() {
				window.location.href="/#/pages/home/home";
			},
			
			loadMore() {
				console.log("loadMore");
				if (this.loadingStatus === 'loading') return;
				this.loadingStatus = 'loading';
				
				this.page = this.page + 1;
				this.article();
				
				// 模拟异步加载数据
				setTimeout(() => {
					// 添加新数据到列表
					// for (let i = 0; i < this.pageSize; i++) {
					//   this.list.push(`Item ${this.list.length + 1}`);
					// }

					// // 判断是否还有更多数据
					// if (this.list.length < this.total) {
					//   this.loadingStatus = 'more';
					// } else {
					//   this.loadingStatus = 'noMore';
					// }

					//this.page++;
					this.loadingStatus = 'more';
				}, 1000)
			},
			search() {
				this.page = 1;
				this.article();
			},

			//请求搜索文章列表
			article() {

				const res = request({
					url: '/home/article/selectes',
					method: 'get',
					data: {
						"page": this.page,
						"pageSize": this.pageSize,
						"queryString": this.searchValue,
						
					} //请求参数
				});
				res.then(res => {
					if(this.page == 1){
						this.items = res.data;
					}else{
						for (let i = 0; i < res.data.length; i++) {
						 this.items.push( res.data[i]);
						}
						//this.items = res.data;
					}
							
					}).catch(err => {
						console.log("xxxx");
					})
				
					
				},
				

		}
	}
</script>

<style>
	.container {
		//padding: 10px;
	}

	#row1 {
		height: 60px;
		background-color: rgba(36, 41, 47);
	}

	.col1 {
		margin-top: 20px;
		text-align: center;
		border: 1px soikld red;
	}

	#img {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		//left: 20px;
		/* background-color: #eeeeee;
		margin-top: 3px; */
	}

	#home-text {
		color: #fff;
		font-weight: 500;
		font-size: 18px;
		//margin-left: 5px;
	}

	#name {
		margin-left: 2px;
		line-height: 34px;
	}

	#search {
		margin-top: 5px;

	}

	#Rotating {
		margin-top: 5px;
		text-align: center;

	}

	.swiper-box {
		height: 150px;

	}

	.Option {
		margin-top: 10px;
	}

	.text {
		text-align: center;
	}

	#uni-grid {
		width: 300px;
		margin-left: 35px;
		/* padding-left: 20px;
		padding-right: 20px; */
	}

	#content {
		padding-left: 20px;
		padding-right: 20px;
	}

	#hot {
		margin: 10px;

	}

	#hot_top_xian {
		background-color: #ff0;
		width: 100%;
		height: 2px;
		margin-top: 5px;
	}

	.scroll-Y {
		height: 300rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		/* //width: 100%; */
		/* border: 1px solid red; */
		//margin-left: 30px;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 90PX;
		height: 44PX;
		line-height: 35px;
		text-align: left;
		font-size: 18px;
		font-weight: 700;
		color: #212529;
	}



	.data_message {
		font-size: 14px;
		line-height: 22px;
		color: #515767;
		min-height: 44px;
	}

	.col2 {
		margin-top: 5PX;
	}
	#nickname{
		    color: #ff6900;
			font-weight: 600;
		    font-size: 14px;
	}
	#head{
		width: 36px;
		height: 36px;
		margin-top: -5px;
		border-radius: 50%;
	}
	#highlighted{
		color: red !important;
		font-size: 20;
	}
	#highlighted{
		color: red;
		font-size: 20;
	}
	.data_title >>> span{
		color: red;
		font-size: 20;
	}
	.data_message >>> span{
		color: red;
		font-size: 20;
	}
	.data_title {
		font-weight: 500;
		font-size: 18px;
		line-height: 26px;
		color: #212529;
	}
</style>